<template>
	<div class="app-container">
		<div class="row1">
			<span class="left-label">项目属性</span>
			<span class="label">项目分类</span>
			<el-select v-model="queryData.projectCategory" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in project_category" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<span class="label">项目状态</span>
			<el-select v-model="queryData.projectStatus" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in project_status" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<span class="left-label" style="margin-left: 20px">项目阶段</span>
			<el-button type="primary" style="height: 30px" @click="changeStage(undefined)">全部</el-button>
			<el-button type="warning" style="height: 30px" v-for="dict in project_stage" :key="dict.value"
				@click="changeStage(dict.value)">{{
					dict.label
				}}</el-button>
		</div>

		<div class="row3">
			<span class="left-label">关键字</span>
			<el-input v-model="queryData.procureOrCustomerName" style="width: 350px; margin-right: 20px"
				placeholder="请输入搜索关键字" />
			<el-checkbox style="position: relative; top: 3px" v-model="queryData.isImportant" true-label="1" false-label=""
				label="重要项目" size="large" />
			<el-button type="primary" style="margin-left: 20px" @click="search">搜索</el-button>
			<el-button @click="() => {
				reset()
				search()
			}
				">重置</el-button>
			<el-button v-if="userStore.$state.roles.includes('yw2')" @click="linkToAdd()">添加项目</el-button>

		</div>

		<div v-if="!['cg2', 'sj2', 'gc2', 'cw2'].some((e) => userStore.$state.roles.includes(e))" class="header">
			<svg-icon icon-class="jilu" style="position: relative; height: 14px; width: 14px" />项目汇总数据
			<span style="float: right;">
				<el-select v-model="queryData.year" placeholder="请选择" size="default" class="select">
					<el-option v-for="dict in select_year" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</span>

		</div>
		<div v-if="!['cg2', 'sj2', 'gc2', 'cw2'].some((e) => userStore.$state.roles.includes(e))" class="items">
			<div class="item flex1" @click="changeStage(1)">
				<div>{{ showCount.documentary }}</div>
				<div>跟单项目</div>
			</div>
			<div class="item flex1" style="width: 100px" @click="() => {
				reset()
				queryData.isImportant = '1'
				search()
			}
				">
				<div>{{ showCount.important }}</div>
				<div>重要项目</div>
			</div>
			<div class="item flex1" @click="() => {
				reset()
				queryData.isMonthlyNew = 1
				search()
			}
				">
				<div>{{ showCount.newly }}</div>
				<div>{{ Date.now().getCurrentInstance }}月新增</div>
			</div>
			<div class="item flex1" @click="() => {
				reset()
				queryData.waitState = 1
				search()
			}
				">
				<div>{{ showCount.waitForAudit }}</div>
				<div>待审核</div>
			</div>
			<div class="item flex1" style="color: #f66c6c" @click="() => {
				reset()
				queryData.flag = true
				search()
			}
				">
				<div>{{ showCount.warns }}</div>
				<div>警告</div>
			</div>
			<div class="item flex2" style="color: #97d986">
				<div>{{ showCount.treatyTotalMoney }}</div>
				<div>{{ queryData.year }}年总合同金额</div>
			</div>
			<div class="item flex2">
				<div>{{ showCount.invoiceMoney }}</div>
				<div>{{ queryData.year }}年总开票金额</div>
			</div>
			<div class="item flex2">
				<div>{{ showCount.myInvoiceMoney }}</div>
				<div>我的{{ queryData.year }}年开票金额</div>
			</div>
			<div class="item flex2" style="color: #97d986">
				<div>{{ showCount.myTreatyMoney }}</div>
				<div>我的{{ queryData.year }}年合同金额</div>
			</div>
			<div class="item flex2" style="color: #f66c6c">
				<div>{{ showCount.myReceived }}</div>
				<div>我的应收款金额</div>
			</div>
		</div>
		<BaseTable v-loading="loading" :columns="columns" :dataList="dataList" noSelection>
			<template #projectCode="{ row }">
				<span style="cursor: pointer; color: #409eff" @click="toDetailInfo(row)">{{ row.projectCode }}</span>
			</template>
			<template #projectName="{ row }">
				<!-- <el-icon v-if="row.flag" style="color: #; position: relative; top: 3px; right;: 2px"><Warning /></el-icon> -->
				<span :style="{ cursor: 'pointer', color: row.flag ? '#f66c6c' : '#409eff' }" @click="toDetail(row)">{{
					row.projectName }}</span>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize"
			@pagination="search" />
	</div>
</template>
<script setup>
import { reactive, watch } from 'vue'
import BaseTable from '@/components/BaseTable'
import { countProject, listProject } from '@/api/project/project'
import useUserStore from '@/store/modules/user'
import { useRoute } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
const route = useRoute()
const loading = ref(false)
const { project_stage, project_category, project_status, is_important, select_year } = proxy.useDict(
	'project_stage',
	'project_category',
	'project_status',
	'is_important',
	'select_year'
)
const columns = ref([
	{ key: 12, width: '90', label: `重要项目`, prop: 'isImportant', type: 'select', data: is_important, visible: true },
	{ key: 1, width: '90', label: `项目编号`, prop: 'projectCode', type: 'custom', visible: true },
	{ key: 2, width: '80', label: `分类`, prop: 'projectCategory', type: 'select', data: project_category, visible: true },
	{ key: 4, label: `项目名称`, minWidth: '300px', prop: 'projectName', type: 'custom', visible: true },
	{ key: 5, width: '150', label: `所属企业`, prop: 'customerName', type: 'text', visible: true },
	{ key: 6, width: '150', label: `合同（结算）金额`, prop: 'treatyMoney', type: 'text', visible: true },
	{ key: 11, width: '130', label: `项目日志数量`, prop: 'projectLogCount', type: 'text', visible: true },
	{ key: 7, width: '90', label: `阶段`, prop: 'projectStage', type: 'select', data: project_stage, visible: true },
	{ key: 8, width: '90', label: `负责人`, prop: 'nickName', type: 'text', visible: true },
	{ key: 3, width: '150', label: `录入时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 9, width: '150', label: `更新时间`, prop: 'updateTime', type: 'dateTime', visible: true },
	{ key: 10, width: '130', label: `状态`, prop: 'projectStatus', type: 'select', data: project_status, visible: true }
])
const total = ref(0)
const dataList = ref([])
const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	projectCategory: '',
	projectStatus: '',
	projectPlan: '',
	projectStage: '',
	procureOrCustomerName: '',
	isImportant: route.query.isImportant,
	isMonthlyNew: '',
	flag: false,
	waitState: 0,
	createUserCode: route.query.createUserCode,
	year: 2024
})
const search = () => {
	loading.value = true
	listProject(queryData).then((res) => {
		total.value = res.total
		dataList.value = res.rows
		loading.value = false
	})
}
const changeStage = (value) => {
	reset()
	queryData.projectStage = value
	search()
}
search()
const reset = () => {
	for (let item in queryData) {
		queryData[item] = ''
	}
	queryData['pageNum'] = 1
	queryData.pageSize = 1000
	queryData['flag'] = false
	queryData['waitState'] = 0
	queryData['year'] = 2024

}
const linkToAdd = () => {
	router.push({
		path: '/project/projectAdd'
	})
}
const toDetail = (row) => {
	router.push({
		path: '/project/projectDetail',
		query: { id: row.projectId }
	})
}
const toDetailInfo = (row) => {
	router.push({
		path: '/project/information',
		query: { id: row.projectId }
	})
}
const { year } = toRefs(queryData)
watch(year, () => {
	countProject({ year: queryData.year }).then((res) => {
		showCount.value = res.data
	})
})
const showCount = ref({})
countProject({ year: queryData.year }).then((res) => {
	showCount.value = res.data
})
</script>
<style lang="scss" scoped>
.header {
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 5px;
}

.items {
	display: flex;
	margin-bottom: 5px;
	font-size: 12px;

	.flex1 {
		flex: 1;
	}

	.flex2 {
		flex: 2;
	}

	.item {
		padding: 10px;
		border-right: 2px rgba(240, 240, 240, 1) solid;
		text-align: center;
		height: 70px;
		line-height: 25px;
		cursor: pointer;
	}

	.item:last-child {
		border-right: none;
	}
}

.left-label {
	color: #33b6fe;
	height: 24px;
	line-height: 24px;
	position: relative;
	top: 1px;
	margin-right: 10px;
	display: inline-block;
	min-width: 80px;
}

:deep(.el-table__header) {
	background-color: #2f3f56;
}

.row1 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;

	.label {
		margin: 5px;
		padding: 8px 5px;
		font-size: 14px;
		background-color: rgb(231, 231, 231);
	}

	.select {
		width: 120px;
		position: relative;
		top: -1px;
	}
}

.row2 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
}

.row3 {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;

	.label {
		margin: 5px;
		padding: 8px 5px;
		margin-left: 10px;
		font-size: 14px;
	}
}

.row4 {
	padding: 5px 0 10px 0;
}
</style>
